<template>
  <div id="app">
    <van-nav-bar
      v-if="showNavBar"
      :title="navBarTitle"
      :left-arrow="showArrow"
      @click-left="onClickLeft"
      fixed
      placeholder
      z-index="900"
      ref="header"
    />
    <transition name="router-fade" mode="out-in">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition name="router-fade" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { NavBar } from 'vant'

@Component({
  components: {
    [NavBar.name]: NavBar
  }
})
export default class extends Vue {
  @Watch('$route', { immediate: true })
  private onRouteChange(route: any) {
    this.navBarTitle = (route.meta && route.meta.title) || ''
    this.showArrow = route.path !== '/'
  }
  private navBarTitle = ''
  private showNavBar = true
  private showArrow = true
  public created() {}
  public mounted() {}
  public onClickLeft() {
    this.$router.go(-1)
  }
}
</script>
<style lang="less">
.router-fade-enter-active,
.router-fade-leave-active {
  transition: opacity 0.3s;
}
.router-fade-enter,
.router-fade-leave-active {
  opacity: 0;
}
.van-nav-bar__left .van-nav-bar__arrow {
  color: #000;
}
</style>
